<template>
  <div class="campus-news">
    <h2>学院新闻</h2>
    <div class="news-container">
      <div v-for="(news, index) in campusNews" :key="index" class="news-item">
        <div class="news-content">
          <img :src="getImage(news.content)" :alt="news.title">
          <h3>{{ truncateTitle(news.title) }}</h3>
          <p>{{ truncateContent(news.content) }}</p>
          <router-link :to="{path: 'news', query: {id:news.id}}">查看详情</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/util/request.js";

export default {
  data() {
    return {
      campusNews: []
    };
  },
  created() {
    this.getData()
  },
  methods:{
    // 获取数据
    getData(){
      request.get("/related_news/page?pageNum=1&pageSize=10").then(res=>{
        if (res.data.code === '200') {
          for (let key in res.data.data) {
            if (key === "records") {
              this.campusNews.push(...res.data.data[key]);
            }
          }
        } else {
          this.$message({
            type: 'error',
            message: '服务端错误',
            center: true,
          })
        }
      })
    },
    truncateTitle(title) {
      if (title.length > 25) {
        return title.slice(0, 25) + '...';
      }
      return title;
    },
    truncateContent(content) {
      if (!content) return ''; // 如果描述为空，返回空字符串

      // 清除 HTML 标签
      const withoutTags = content.replace(/(<([^>]+)>)/gi, "");
      // 截取前37个字符
      if (withoutTags.length > 37) {
        return withoutTags.slice(0, 37) + '...';
      }
      return withoutTags;
    },
    getImage(content) {
      // 使用正则表达式匹配图片或视频链接，这里简单演示匹配图片链接
      const imageRegex = /<img.*?src="(.*?)"/;
      const match = content.match(imageRegex);
      if (match) {
        return match[1]; // 返回匹配到的图片链接
      } else {
        // 如果没有匹配到图片链接，返回随机图片链接
        const randomIndex = Math.floor(Math.random() * 1000); // 生成0到999的随机数
        return `https://picsum.photos/300/300?random=${randomIndex}`;
      }
    }
  }
};
</script>

<style scoped>
.campus-news {
  text-align: center;
}

/* 修改滚动条样式 */
.news-container::-webkit-scrollbar {
  width: 20px; /* 修改滚动条宽度 */
}

.news-container::-webkit-scrollbar-track {
  background: transparent; /* 设置滚动条轨道背景色 */
}

.news-container::-webkit-scrollbar-thumb {
  background-color: rgba(147, 242, 243, 0.71); /* 设置滚动条thumb颜色 */
  border-radius: 7px; /* 设置滚动条thumb的圆角 */
  border: 1px solid #aaa; /* 设置滚动条thumb的边框 */
}

.news-container {
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  width: 100%; /* 设置容器宽度为100% */
}

.news-item {
  margin: 10px;
  border: 1px solid #ccc;
  border-radius: 12px; /* 调整卡片的圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(21, 58, 141, 0.99); /* 调整阴影效果 */
  flex: 0 0 auto; /* 设置项目不可伸缩，尺寸由内容决定 */
  width: 600px; /* 调整卡片宽度 */
  height: 450px; /* 增加卡片高度 */
}


.news-content {
  padding: 20px;
  width: 100%; /* 调整卡片宽度 */
  height: 100%;
}

.news-content img {
  width: 100%; /* 设置图片宽度为100% */
  height: 70%; /* 设置图片高度为100% */
  object-fit: cover; /* 裁剪图片以保持纵横比 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


.news-content h3 {
  margin-top: 10px;
  font-size: 1.3rem;
  font-weight: bolder;
}

.news-content p {
  margin-top: 10px;
  font-size: 1rem;
  word-wrap: break-word; /* 添加自动换行 */
  overflow-wrap: break-word; /* 兼容性更好的写法 */
}


</style>
